<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container" >
      <el-input
        v-model="infoForm.id"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入学号"
      />
      <el-input
        v-model="infoForm.userName"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入姓名"
      />
      <el-input
        v-model="infoForm.college"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入学院"
      />
      <el-input
        v-model="infoForm.grade"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入专业"
      />
      <el-input
        v-model="infoForm.inClass"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入班级"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="queryList(1)"
      >查找</el-button>
      <el-radio-group
        :fill="radioColor"
        v-model="infoForm.state"
        class="filter-item">
        <el-radio-button :label="0" >未冻结</el-radio-button>
        <el-radio-button :label="1" >以冻结</el-radio-button>
      </el-radio-group>

    </div>

    <!-- 查询结果 -->
    <div>
      <el-table
        v-loading="listLoading"
        :data="list"
        size="small"
        element-loading-text="正在查询中。。。"
        :height="tabHeight"
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="150px" label="学号" prop="id"/>
        <el-table-column align="center" width="150px" label="姓名" prop="userName"/>
        <el-table-column align="center" width="100px" label="性别" prop="sex"/>
        <el-table-column align="center" width="150px" label="学院" prop="college"/>
        <el-table-column align="center" width="200px" label="专业" prop="specialized"/>
        <el-table-column align="center" width="100px" label="班级" prop="classNum"/>
        <el-table-column
          align="center"
          width="100px"
          label="书架">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="getBookshelf(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100px"
          label="借阅信息">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="getBorrowList(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200px">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-show="showButton" @click="updateUserState(scope.row)">冻结账号</el-button>
            <el-button type="text" size="small" v-show="!showButton" @click="updateUserState(scope.row)">解冻账号</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!--    书架 弹框-->
    <el-dialog
      title="用户书架"
      :visible.sync="bookshelf.showDialog"
      width="500px">
      <el-table
        v-loading="bookshelf.listLoading"
        :data="bookshelf.bookshelfList"
        size="small"
        element-loading-text="正在查询中。。。"
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="150px" label="书名" prop="bookName"/>
        <el-table-column align="center" width="150px" label="作者" prop="author"/>
        <el-table-column align="center" width="150px" label="出版社" prop="publisher"/>
      </el-table>

      <el-pagination
        v-show="bookshelf.total>0"
        :total="bookshelf.total"
        :page-size="bookshelf.pageSize"
        @current-change="bookshelfCurrentChange"
      />
    </el-dialog>

    <!--    用户借阅信息弹框 弹框-->
    <el-dialog
      title="用户借阅信息"
      :visible.sync="borrow.showDialog"
      width="800px">
      <el-table
        v-loading="borrow.listLoading"
        :data="borrow.borrowList"
        size="small"
        element-loading-text="正在查询中。。。"
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="150px" label="书名" prop="bookName"/>
        <el-table-column align="center" width="250px" label="借书时间" prop="startTime"/>
        <el-table-column align="center" width="250px" label="还书时间" prop="returnTime"/>
        <el-table-column align="center" width="100px" label="还书状态">
          <template slot-scope="scope">
            <el-button circle type="warning" size="small" v-show="scope.row.timeState === 0">未</el-button>
            <el-button style="margin-right: 10px;" circle type="success" size="small" v-show="scope.row.timeState === 1">已</el-button>
            <el-button style="margin-right: 10px;" circle type="danger" size="small" v-show="scope.row.timeState === 2">超</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-show="borrow.total>0"
        :total="borrow.total"
        :page-size="borrow.pageSize"
        @current-change="borrowCurrentChange"
      />
    </el-dialog>


    <!-- 分页角标-->
    <div class="fypage">
      <el-pagination
        v-show="total>0"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
    export default {
        name: "userList",
        data(){
            return{
                infoForm: {
                    id:'',
                    userName:'',
                    college:'',
                    specialized:'',
                    classNum:'',
                    state:0,
                },
                bookshelf:{
                    row:{},
                    bookshelfList:[],
                    total:0,
                    listLoading:false,
                    pageSize:5,
                    showDialog:false,
                },
                borrow:{
                    row:{},
                    borrowList:[],
                    total:0,
                    listLoading:false,
                    pageSize:5,
                    showDialog:false,
                },
                list:[
                    {
                        id:0,
                        userName:'神',
                        state:0,
                    }
                ],
                total: 1,
                pageNum: 1,
                pageSize: 10,
                orderBy: '',
                sort: '',
                listLoading: false,
                tabHeight: 540,
                showButton: true,
                radioColor: '#6df20b'

            }
        },

        created() {
            this.queryList(1)
        },

        watch:{

            'infoForm.state'(){
                if(this.infoForm.state === 0){
                    this.radioColor = '#6df20b'
                    this.showButton = true
                }else if(this.infoForm.state === 1){
                    this.radioColor = '#f20d00'
                    this.showButton = false
                }
                this.queryList(1)
            }
        },

        methods: {

            //修改用户状态
            updateUserState(row){
                this.$confirm('用户 “ '+ row.userName +' ” 将被' + (row.state == 0 ? '冻结' : '激活') + '，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const self = this
                    self.listLoading = true
                    self.$axios.get('/manage/user/updateUserState',{
                        params:{
                            id:row.id, //学号
                            state:row.state, //用户当前状态 0-》未冻结 1-》以冻结
                        }
                    }).then(res =>{
                        try {
                            self.list = res.data.data
                            self.total = res.data.total
                            self.listLoading = false
                        }catch(err){
                            self.listLoading = false
                            self.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        self.$message.error("查询出错！！！！！")
                        self.listLoading = false
                    })
                }).catch(() => {
                })
            },

            //查询用书借阅记录
            getBorrowList(row,current){
                this.borrow.row = row
                this.borrow.showDialog = true
                const self = this
                self.borrow.listLoading = true
                self.$axios.get('/manage/user/getUserBorrow',{
                    params:{
                        id:self.borrow.row.id, //学号
                        pageNum: current || 1,
                    }
                }).then(res =>{
                    try {
                        self.borrow.borrowList = res.data.data
                        self.borrow.total = res.data.total
                        self.borrow.listLoading = false
                    }catch(err){
                        self.borrow.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.borrow.listLoading = false
                })
            },

            borrowCurrentChange(current){
                this.getBorrowList(this.borrow.row,current)
            },

            //查询用户书架
            getBookshelf(row,current){
                this.bookshelf.row = row
                this.bookshelf.showDialog = true
                const self = this
                self.bookshelf.listLoading = true
                self.$axios.get('/manage/user/getBookshelf',{
                    params:{
                        id:row.id, //学号
                        pageNum: current || 1
                    }
                }).then(res =>{
                    try {
                        self.bookshelf.bookshelfList = res.data.data
                        self.bookshelf.total = res.data.total
                        self.bookshelf.listLoading = false
                    }catch(err){
                        self.bookshelf.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.bookshelf.listLoading = false
                })
            },

            bookshelfCurrentChange(current){
                this.getBookshelf(this.bookshelf.row,current)
            },

            //当前页数，排序字段，排序方式
            queryList(page,order,sortord){
                const self = this
                self.listLoading = true
                self.pageNum = page
                self.orderBy = order
                self.sort = sortord
                let data = {
                    'id': self.infoForm.id || null, //学号
                    'userName': self.infoForm.userName || null, //姓名
                    'college': self.infoForm.college || null, //所在学院
                    'specialized': self.infoForm.specialized || null, //所在专业
                    'classNum': self.infoForm.classNum || null, //所在班级
                    'state': self.infoForm.state, //用户状态 0-》未冻结 1-》已冻结

                    'orderBy': self.orderBy || null, //排序字段
                    'pageNum': self.pageNum || 1, //当前页数
                    'pageSize': self.pageSize || 10, //每页展示条数
                    'sort': self.sort || null, //排序方式
                }
                self.$axios.post('/manage/user/getUserList',data).then(res =>{
                    try {
                        self.list = res.data.data
                        self.total = res.data.total
                        self.listLoading = false
                    }catch(err){
                        self.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.listLoading = false
                })
            },

            handleCurrentChange(current){
                this.queryList(current)
            },
        }
    }
</script>

<style scoped>

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
